<script setup>
import { ref, reactive, watch, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useIuserInfoStore } from '@T2/store/users.ts';
import { informationdisclosureApi as MainApi, informationdisclosureById as MainById, optionApi } from '@T2/service/api.ts';
import { DeleteMain } from '@T2/utils/handleFnc.ts';
import MainDrawer from './components/MainDrawer.vue';
import TypeDialog from './components/typeDialog.vue';
import ShowDialog from './components/showDialog.vue';
import dayjs from 'dayjs';

const iuserInfoStore = useIuserInfoStore();
const { getHandleRight } = iuserInfoStore;
const RIGHT = getHandleRight(['407', '408', '409', '410']);

onMounted(() => {
  GetMain();
  getOptions();
});

const MainRt = reactive({
  data: [],
  total: 0,
  options: [],
});
const Filter = reactive({
  page: 1,
  pagesize: 30,
  search: '',
  type: null,
  show: null,
});
watch(() => ({...Filter}), (nv, ov) => {
  if (nv.page === 1 || nv.page !== ov.page) {
    GetMain();
  } else {
    Filter.page = 1;
  }
});
const GetMain = () => {
  MainApi({
    method: 'get',
    params: {
      ...Filter,
    }
  }).then(res => {
    MainRt.data = res?.results || [];
    MainRt.total = res?.count || 0;
  });
}
const getOptions = () => {
  optionApi({
    method: 'get',
    params: {
      type: '信息类型',
    }
  }).then(res => {
    MainRt.options = res?.results || [];
  });
}

/* 新增编辑抽屉 */
const MainDraRt = reactive({
  show: false,
  type: '新增',
  dftData: null,
  row: null,
});
const handleMainDrawer = (isAble = false, type, row = null) => {
  if (!isAble) {
    return;
  }
  MainDraRt.type = type;
  MainDraRt.show = true;
  MainDraRt.dftData = type === '新增' ? { type: Filter.type } : null;
  MainDraRt.row = row;
}
const closeMainDrawer = (refresh = false) => {
  MainDraRt.show = false;
  if (refresh) {
    GetMain();
  }
}
const handleHidden = (isAble = false, row = null) => {
  if (!isAble) {
    return;
  }
  MainById({
    method: 'patch',
    id: row.id,
    data: {
      is_date_active: true,
      show_date: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    }
  }).then(res => {
    ElMessage.success('操作成功');
    GetMain();
  }).catch(res => {
    ElMessage.success('操作失败');
    GetMain();
  });
}

/* 类型管理 */
const typeDlgRt = reactive({
  show: false,
});
const handleType = (isAble = false) => {
  if (!isAble) {
    return;
  }
  typeDlgRt.show = true;
}
const closeTypeDlg = () => {
  typeDlgRt.show = false;
  getOptions();
}

/* 恢复展示 */
const showDlgRt = reactive({
  show: false,
  row: null,
});
const handleShowDlg = (isAble = false, row) => {
  if (!isAble) {
    return;
  }
  showDlgRt.show = true;
  showDlgRt.row = row;
}
const closeShowDlg = (refresh = false) => {
  showDlgRt.show = false;
  if (refresh) {
    GetMain();
  }
}
</script>

<template>
  <div class="view flex">
    <div class="work-box flex-column mainCard">
      <el-form label-width="120px" class="flex t_form">
        <el-form-item label="类型：">
          <el-select v-model="Filter.type" clearable>
            <el-option
              v-for="item in MainRt.options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态：">
          <el-select v-model="Filter.show" clearable>
            <el-option label="展示中" :value="true" />
            <el-option label="隐藏" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item label="模糊查询：">
          <el-input v-model="Filter.search" clearable></el-input>
        </el-form-item>
        <div class="flex r_btn" style="gap: 10px">
          <el-button type="primary" plain @click="handleType(RIGHT['410'])" :disabled="!RIGHT['410']">
            类型管理
          </el-button>
          <el-button type="primary" @click="handleMainDrawer(RIGHT['407'], '新增')" :disabled="!RIGHT['407']">
            新增
          </el-button>
        </div>
      </el-form>
      <el-table :data="MainRt.data" scrollbar-always-on>
        <el-table-column label="标题" prop="title" min-width="160px" fixed="left"></el-table-column>
        <el-table-column label="类型" prop="type_name" min-width="140px"></el-table-column>
        <el-table-column label="展示期限" prop="show_date" min-width="260px" show-overflow-tooltip></el-table-column>
        <el-table-column label="创建时间" prop="create_time" min-width="160px"></el-table-column>
        <el-table-column label="状态" prop="is_date_active" min-width="160px">
          <template #default="{ row }">
            {{ !row.is_date_active ? '展示中' : dayjs().isBefore(dayjs(row.show_date), 'second') ? '展示中' : '隐藏' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" min-width="170px">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleMainDrawer(RIGHT['408'], '编辑', row)" :disabled="!RIGHT['408']">
              编辑
            </el-button>
            <template v-if="!row.is_date_active || dayjs().isBefore(dayjs(row.show_date), 'second')">
              <el-button link type="primary" @click="handleHidden(RIGHT['408'], row)" :disabled="!RIGHT['408']">
                隐藏
              </el-button>
            </template>
            <template v-else>
              <el-button link type="primary" @click="handleShowDlg(RIGHT['408'], row)" :disabled="!RIGHT['408']">
                恢复展示
              </el-button>
            </template>
            <el-button link type="danger" @click="DeleteMain(RIGHT['409'], MainById, row, '', GetMain)" :disabled="!RIGHT['409']">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="->, total, prev, pager, next, sizes"
        background 
        :page-sizes="[10, 20, 30, 50, 100]"
        :pager-count="5"
        v-model:currentPage="Filter.page"
        v-model:page-size="Filter.pagesize"
        :total="MainRt.total"
      />
    </div>
  </div>
  
  <MainDrawer
    :type="MainDraRt.type"
    :row="MainDraRt.row"
    :dftData="MainDraRt.dftData"
    :options="MainRt.options"
    @closed="closeMainDrawer"
    v-if="MainDraRt.show"
  />
  
  <TypeDialog @closed="closeTypeDlg" v-if="typeDlgRt.show"/>
  
  <ShowDialog :row="showDlgRt.row" @closed="closeShowDlg" v-if="showDlgRt.show" />
</template>

<style lang="scss" scoped>
@use '@T2/styles/normal.scss';
.view {
  width: 100%;
  height: 100%;
}
.work-box {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.form-col {
  width: 50%;
  flex-direction: column;
}
/* 资料上传 */
.upload_info {
  font-size: 12px;
  color: #999999;
  line-height: 16px;
}

.line {
  width: 100%;
  .info-item {
    margin-bottom: 16px;
    label {
      font-weight: 400;
      font-size: 14px;
      color: #888888;
      white-space: nowrap;
    }
    p {
      font-weight: 400;
      font-size: 14px;
      color: #111111;
    }
  }
  .picture-box {
    flex: 1;
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    .image-container {
      width: 80px;
      height: 80px;
      overflow: hidden;
      border-radius: 4px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
    }
  }
  .voice-item {
    margin-bottom: 5px;
    border-bottom: 1px solid #e6e6e6;
    .voice-name {
      font-weight: 400;
      font-size: 14px;
      color: #1890FF;
      margin-right: 20px;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>

<style scoped>
:deep(.form-col .el-form-item__label) {
  justify-content: flex-start;
  color: #888888;
  height: 20px;
  line-height: 20px;
  margin-bottom: 4px;
}
</style>